<template>
    <div class="xinwenxinxi-detail" v-loading="loading">
        <div>
            <e-container>
                <e-module-widget-title title="游戏资讯详情">
                    <div>
                        <div class="common-title" style="margin-top: 4em">
                            <p>
                                <i></i>
                                <i></i>
                            </p>
                        </div>
                        <div class="news_show">
                            <div style="float: right">
                                <el-badge :value="shoucangCount" style="margin-right: 15px">
                                    <el-button type="primary" v-if="!is_shoucang" @click="onShoucangChange" icon="el-icon-star-off"> 收藏 </el-button>
                                    <el-button type="danger" v-else icon="el-icon-star-on" @click="onShoucangChange"> 取消收藏 </el-button>
                                </el-badge>
                            </div>
                            <span class="show_t" v-html="map.biaoti"> </span>
                            <span class="fa_time">
                                分类: <e-select-view module="xinwenfenlei" :value="map.fenlei" select="id" show="fenleimingcheng"></e-select-view> &nbsp;&nbsp; 点击率:{{
                                map.dianjilv }} &nbsp;&nbsp;
                            </span>

                            <div v-html="map.neirong"></div>
                            <div class="s_x clearfix">
                                <template v-if="prev.id">
                                    <router-link :to="'xinwenxinxidetail?id='+prev.id" class="s_prev"> 上一篇：<span v-html="prev.biaoti"></span> </router-link>
                                </template>
                                <template v-else>
                                    <a href="javascript:;" class="s_prev">上一篇：没有了</a>
                                </template>

                                <template v-if="next.id">
                                    <router-link :to="'/xinwenxinxidetail?id='+next.id" class="x_next"> 下一篇：<span v-html="next.biaoti"></span> </router-link>
                                </template>
                                <template v-else>
                                    <a href="javascript:;" class="x_next">下一篇：没有了</a>
                                </template>
                            </div>
                        </div>
                    </div>
                </e-module-widget-title>
            </e-container>
        </div>
    </div>
</template>
<style type="text/scss" scoped lang="scss"></style>
<script>
    import api from "@/api";
    import { extend } from "@/utils/extend";
    import jdk from "@/utils/extend";
    export default {
        data() {
            return {
                loading: false, // 加载

                is_shoucang: false,
                shoucangCount: 0,

                map: {
                    biaoti: "",
                    fenlei: "",
                    tupian: "",
                    tianjiaren: "",
                    dianjilv: "",
                    neirong: "",
                },
                prev: {},
                next: {},
            };
        },
        props: {
            id: {
                type: [String, Number],
                required: true,
            },
        },
        watch: {
            id: {
                handler() {
                    this.loadDetail();
                },
                immediate: true,
            },
        },
        computed: {},
        methods: {
            loadDetail() {
                if (this.loading) return;
                this.loading = true;
                this.$get(api.xinwenxinxi.webdetail, {
                    id: this.id,
                })
                    .then((res) => {
                        this.loading = false;
                        if (res.code == api.code.OK) {
                            extend(this, res.data);
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
            onShoucangChange() {
                if (this.loading) return;
                this.loading = true;
                var map = this.map;
                this.$post("shoucanginsert.do", {
                    biao: "xinwenxinxi",
                    xwid: map.id,
                    biaoti: map.biaoti,
                })
                    .then((res) => {
                        if (res.code == 0) {
                            if (this.is_shoucang) {
                                this.$message.success("已取消收藏");
                                this.is_shoucang = false;
                                this.shoucangCount--;
                            } else {
                                this.$message.success("已收藏");
                                this.is_shoucang = true;
                                this.shoucangCount++;
                            }
                        } else {
                            this.$message.error(res.msg);
                        }
                        this.loading = false;
                    })
                    .catch((err) => {
                        this.loading = false;
                        this.$message.error(err.message);
                    });
            },
        },
        created() {},
        mounted() {},
        destroyed() {},
    };
</script>
